{extend name="public/world"}
{block name="style"}
<style type="text/css">
.layui-btn-xs {
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    font-size: 12px;
}
.layui-table-tool {
    min-height: 30px;
    line-height: 30px;
    padding: 0 10px;
}
.layui-table-view .layui-table {
    position: relative;
    width: 100%;
    margin: 0;
}
#dataTable tr:first-child {background-color: #2b2b2b;color: #fff9ec;}
.row-in {background-color: #0052A3 !important;color: #fff9ec !important;}
.layui-input, .layui-select {
    height: 30px;
}
.layui-form-label {
    padding: 7px 3px 7px 0;
    width: auto;
}
.layui-table-cell_span {display: block;width: 100%;}
</style>
{/block}
{block name="container"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="formSearch">
                <div class="layui-field-box" style="padding:0;">
                    <div class="layui-form-item" style="margin-bottom:0">
                        <div class="layui-inline my-search">
                            <label class="layui-form-label">期初日期</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" name="start_at" class="layui-input" id="laydate-start" placeholder="会计期间" autocomplete="off" lay-key="1" value="{$start_day}">
                            </div>
                            <label class="layui-form-label">期末日期</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" name="end_at" class="layui-input" id="laydate-end" placeholder="会计期间" autocomplete="off" lay-key="2" value="{$end_day}">
                            </div>
                            <div class="layui-input-inline" style="width: 170px;">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="search">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-border-box layui-table-view">
                <div class="layui-table-tool">
                    <div class="layui-table-tool-temp">
                        <div class="layui-btn-group fl">
                            <button type="button" class="layui-btn layui-btn-xs open-all">全部展开</button>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-xs close-all">全部关闭</button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="dataTable" lay-size="sm"></table>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['form','treeTable', 'laydate'], function() {
        var $ = layui.jquery
            , form = layui.form
            , laydate = layui.laydate
            , treeTable = layui.treeTable;
        //开始日期
        var insStart = laydate.render({
            elem: '#laydate-start'
            ,max: '{$end_day}'
            ,min: '2021-01-01'
            ,type: 'date'
            //,value: new Date()
            ,done: function(value, date){
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });
        //开始日期
        var insEnd = laydate.render({
            elem: '#laydate-end'
            ,max: '{$end_day}'
            ,min: '2021-01-01'
            ,type: 'date'
            //,value: new Date()
            ,done: function(value, date){
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
        form.on('submit(search)', function(){
            tableIns.where = form.val("formSearch");
            tableIns.data = [];
            treeTable.render(tableIns);
        });
        var	tableIns = treeTable.render({
            elem: '#dataTable',
            url: "{:url('/erp.Finance/index')}",
            where: form.val("formSearch"),
            icon_key: 'name',
            end: function(e){
                form.render();
            },
            cols: [
                {
                    key: 'name',
                    title: '名称',
                    width: '30%',
                    template: function(item){
                        if(item.level == 0){
                            return '<span style="color:red;">'+item.name+'</span>';
                        }else if(item.level == 1){
                            return '<span style="color:green;">'+item.name+'</span>';
                        } else {
                            return '<span>'+item.name+'</span>';
                        }
                    }
                },
                {
                    key: 'code',
                    title: '科目编码',
                    width: '10%',
                },
                {
                    key: 'start_debit',
                    title: '期初借方',
                    width: '10%',
                    align: 'right',
                },
                {
                    key: 'start_credit',
                    title: '期初贷方',
                    width: '10%',
                    align: 'right',
                },
                {
                    key: 'debit',
                    title: '期间借方',
                    width: '10%',
                    align: 'right',
                },
                {
                    key: 'credit',
                    title: '期间贷方',
                    width: '10%',
                    align: 'right',
                },
                {
                    key: 'end_debit',
                    title: '期末借方',
                    width: '10%',
                    align: 'right',
                },
                {
                    key: 'end_credit',
                    title: '期末贷方',
                    width: '10%',
                    align: 'right',
                }
            ]
        });
        // 监听自定义
        treeTable.on('row',function(){
            if($(this).hasClass('row-in')) {
                $(this).removeClass('row-in');
            } else {
                $(this).addClass('row-in').siblings('tr').removeClass('row-in');
            }
        })
        treeTable.on('rowDouble',function(data){
            $(this).addClass('row-in').siblings('tr').removeClass('row-in');
            if(data.item.debit > 0 || data.item.credit > 0) {
                var url = "{:url('/erp.Finance/show')}?"+ $.param(form.val("formSearch")) + '&code='+ data.item.code;
                window.open(url, '_blank');
            }
        })
        // 全部展开
        $('.open-all').click(function(){
            treeTable.openAll(tableIns);
        })
        // 全部关闭
        $('.close-all').click(function(){
            treeTable.closeAll(tableIns);
        })
    });
</script>
{/block}